<template>
  <div>
    <div class="demo-input-suffix gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>学员</p>
          <el-input v-model="clubPageListQO.clubName" placeholder="学员姓名/联系方式" clearable size="mini" />
        </el-col>
        <el-col :md="6" :lg="4">
          <p>线下课名称</p>
          <el-input v-model="clubPageListQO.clubName" placeholder="学员姓名/联系方式" clearable size="mini" />
        </el-col>
        <el-col :md="6" :lg="4">
          <p>课程顾问</p>
          <el-select size="mini" placeholder="" filterable>
            <!-- <el-option v-for="item in items" :key="item" :label="item" :value="item" /> -->
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <p>经办人</p>
          <el-select size="mini" placeholder="" filterable>
            <!-- <el-option v-for="item in items" :key="item" :label="item" :value="item" /> -->
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :md="8" :lg="6">
          <p>退课时间</p>
          <el-date-picker v-model="value1" size="mini" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" />
        </el-col>
        <el-col :span="4">
          <el-button style="margin-top:27px" type="primary" size="mini">{{ $t('button.query') }}</el-button>
          <el-button style="margin-top:27px" type="warning" size="mini">{{ $t('button.Reset') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="tableData" size="mini" stripe height="300">
      <el-table-column prop="date" label="学员" width="180" />
      <el-table-column prop="type" label="	手机号" width="180" />
      <el-table-column prop="address" label="退课课程" />
      <el-table-column prop="type" label="退课内容" width="180" />
      <el-table-column prop="status" label="退回金额" width="180" />
      <el-table-column prop="dec" label="退课状态" width="180" />
      <el-table-column prop="name" label="退课方式" width="180" />
      <el-table-column prop="name" label="退课备注" width="180" />
      <el-table-column prop="name" label="课程顾问" width="180" />
      <el-table-column prop="name" label="经办人" width="180" />
      <el-table-column prop="name" label="操作时间" width="180" />
      <el-table-column label="操作" width="180" fixed="right">
        <template>
          <el-button type="text" size="small">{{ $t('button.edit') }}</el-button>
          <el-button type="text" size="small" class="gl_color_error" @click="deleteRow">{{ $t('button.delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div align="center" class="gl_py_10">
      <el-pagination
        :current-page="clubPageListQO.pageIndex"
        :page-size="clubPageListQO.pageSize"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </div>
    <el-dialog title="批量导入学员" width="880px" class="gl_dialog_TitleLine" :close-on-click-modal="false" :visible.sync="dialogBatchImportVisible">
      <div>
        content
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" :loading="submitLoading" @click="confirmPatchImport">下一步</el-button>
        <el-button size="mini" @click="dialogBatchImportVisible = false">{{ $t('button.cancel') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { translateByCode } from '@/lib/getTransData';
import { ClubPageListQO } from '@/lib/form/club';
export default {
  data() {
    return {
      clubPageListQO: new ClubPageListQO(),
      conten: '',
      tableData: [],
      totalPage: 0,
      submitLoading: false,
      checkedData: [],
      checkedIndex: 0,
      authorityType: [],
      dialogBatchImportVisible: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  },
  computed: {
  },
  watch: {
  },
  methods: {
    getPageData() {
      this.totalPage = 0;
    },
    sizeChange: function(pageSize) {
      this.clubPageListQO.pageSize = pageSize;
      this.getPageData();
    },
    pageIndexChange: function(pageIndex) {
      this.clubPageListQO.pageIndex = pageIndex;
      this.getPageData();
    },
    batchImportDialog() {
      this.dialogBatchImportVisible = true;
    },
    confirmPatchImport() {

    },
    deleteRow(row) {
      this.$confirm(`您确定要删除这条数据吗？`, '提示', {
        confirmButtonText: translateByCode('alert.confirm'),
        cancelButtonText: translateByCode('alert.cancel'),
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: translateByCode('alert.deleteSuccessfully')
        });
      }).catch(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
.authority-type {
  .el-button {
    margin: 10px 30px 0;
    box-sizing: border-box;
  }
}
</style>
